

<template>
	<div class="container content-wrapper" >
		<div class="home-wrap" :class="[screen_with == 'small'?'small_content':screen_with == 'mid'?'mid_content':'']">
			<div class="row">
				<div class='col-lg-7 col-md-7 col-sm-7 '>
					<networkstatus :attack_count='attack_count'></networkstatus>
					<penetration :attack_info='attack_info' :show='show'></penetration>
					<portstatus :eths='eths' :show='show'></portstatus>
				</div>
				<div class='right col-lg-5 col-md-5 col-sm-5'>
					<networklive :net_state='net_state' :show='show'></networklive>
					<systemstatus :sys_state='sys_state' :show='show'></systemstatus>
					<eventlog :event_log ='event_log' :show='show'></eventlog>
				</div>
			</div>
		</div>
	</div>

</template>
<script>	
import indexService from 'services/indexService'
import networkstatus from './content/networkstatus.vue'
import penetration from './content/penetration.vue'
import portstatus from './content/portstatus.vue'
import networklive from './content/networklive.vue'
import systemstatus from './content/systemstatus.vue'
import eventlog from './content/eventlog.vue'
export default {
	created() {
		this.getScreenWidth()
		this.loadData()
		let _this = this
		$(window).resize(function() {
				_this.getScreenWidth()
		})
	},
	data() {
		return{
			totalData: {},
			intervalid: null,
			event_log: [],
			eths: [],
			net_state: {},
			attack_info: {},
			sys_state: {},
			attack_count: {},
			show: false,
			clearTimeout: false
		}
	},
	methods:{
		dateFormat(date, format) {
			let o = {
				'M+': date.getMonth() + 1,
				'd+': date.getDate(),
				'h+': date.getHours(),
				'm+': date.getMinutes(),
				's+': date.getSeconds(),
				'q+': Math.floor((date.getMonth() + 3) / 3),
				'S': date.getMilliseconds()
			}

			if (/(y+)/.test(format)) {
				format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length))
			}

			for (let k in o) {
				if (new RegExp("(" + k + ")").test(format)) {
					format = format.replace(RegExp.$1, (RegExp.$1.length === 1 ? o[k] : (("00" + o[k]).substr(("" + o[k]).length))))
				}
			}

			return format
		},
		getScreenWidth() {
      	let  screen_with = $(window).width()
      	if (screen_with > 1470) {
      		this.screen_with = 'big'
      	} else if (screen_with <= 1470 && screen_with > 1280) {
      		this.screen_with = 'mid'
      	} else {
      		this.screen_with = 'small'     	
      	}
      },
		loadData:function() {
			indexService.getState()
			.then((res) => {
				
				if (res.errcode === 0) {
					this.show = true
					// this.totalData = res.data
				
					
					this.attack_count = {
						total: res['15'].attack_count,
						is_save: res['15'].check_time * 1 > res['15'].attack_time * 1 ? true : false
					}

					this.net_state = {
						conns: res['18'],
						host: res['4'],
						uptime: Number(res['19']),
						virtual: res['21']
					}

					this.attack_info = {
						active_mac: res['17'].stats.map((item) => {
							return {
								con: item.connects,
								desc: item.desc,
								mac: item.mac,
								rx: item.down_speed,
								tx: item.up_speed
							}
						}),
						attack: res['16'].map((item) => {
							return {
								block: item.is_block,
								count: item.count,
								desc: item.description,
								mac: item.attack_source,
								phy_port: item.groupid,
								type: item.attack_type,
								start_time: item.start_time,
								end_time: item.end_time
							}
						})
					}

					this.sys_state = {
						cpu: (res['1'].user * 1 + res['1'].system * 1) / 100,
						// disk: {
						// 	total: 0, used: 0
						// },
						// total: 0,
						// used: 0,
						memory: res['2'].used * 1 / (res['2'].total),
						online_node: res['4'],
						start: res['19'],
						time: this.dateFormat(new Date(res['24'] * 1000), 'yyyy-MM-dd hh:mm:ss'),
						version: res['23']
					}
					

					this.eths = res['9'].map((item) => {
						return {
							in_bps: item.in_Bps,
							in_drop: item.in_dropped,
							in_err: item.in_errors,
							// in_frame: item.
							inbytes: item.in_bytes,
							inpkts:item.in_packets,
							// ipaddr
							// ipv6addr
							macaddr: item.macaddr,
							name: item.name,
							out_bps: item.out_Bps,
							out_drop: item.out_dropped,
							out_err: item.out_errors,
							// out_frame
							outbytes: item.out_bytes,
							outpkts: item.out_packets,
							up: Number(item.up)
						}
					})
					
					this.event_log = res['22'].map((item) => {
						return {
							content: item.content,
							descr: item.descr,
							id: item.id,
							timestamp: item.timestamp,
							type: item.type,
							valid: item.valid
						}
					})
					

					if (this.clearTimeout) {
						return 
					}
					clearTimeout(this.intervalid)
					this.intervalid = setTimeout(() => this.loadData(), 1000)
				}
			}, () => {
				if (this.clearTimeout) {
						return 
				}
				clearTimeout(this.intervalid)
				this.intervalid = setTimeout(() => this.loadData(), 1000)
			})
		}
	},
	components: {
		networkstatus,
		penetration,
		portstatus,
		networklive,
		systemstatus,
		eventlog
	},
	beforeDestroy() {
		this.clearTimeout = true
	    clearTimeout(this.intervalid)
	}
}
</script>
<style scoped>
.home-wrap {
	min-width: 1200px;
	padding-bottom: 60px;
}
.container{
	height: 100%;
}
.un_accredit{
	width: 1240px;
}
.right{
	padding-left: 0;
}
.small_content{
	margin-left: -30px;
}
.mid_content{
	margin-left: -20px;
}
/*动画*/	
	.fade-enter-active, .fade-leave-active {
       transition: opacity .5s ease;
    }
	.fade-enter, .fade-leave-active {
	  opacity: 0
	}
</style>